<template>
  <div class="app-container">
    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="17" class="card-box">
        <div style="display: flex; justify-content: space-between">
          <el-select
            v-model="query.brandList"
            multiple
            placeholder="选择品牌"
            filterable
            @change="getbrandList"
            style="width: 300px"
            size="mini"
          >
            <el-option
              v-for="dict in dict.type.sys_product_pp"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            />
          </el-select>

          <!-- <listAll @getbrandList="getbrandList" /> -->
          <!-- <el-radio-group
            v-model="query.channelType"
            v-if="activeName == 1"
            size="mini"
          >
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group> -->
        </div>
      </el-col>

      <!-- <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.brandList + " " }}总览情况</span
            >
          </div>
          <el-row :gutter="20"><KoiCardI :itemData="itemData" /></el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="6">
              <TotalSales :itemData="itemData" />
            </el-col>
            <el-col :span="6">
              <TotalSalesI :itemData="itemData" />
            </el-col>
            <el-col :span="6">
              <TotalSalesII :itemData="itemData" />
            </el-col>
            <el-col :span="6">
              <TotalSalesIII :itemData="itemData" />
            </el-col>
          </el-row> -->
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span><i class="el-icon-collection"></i> 差评高频关键词 </span>
          </div>
          <wordCloud
            :chartsData="chartsData"
            @SetLineChartData="SetLineChartData"
          />
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span><i class="el-icon-collection"></i> 差评关键词原始评价数据</span>
      </div>
      <component :is="'BiCommentFirstDwd'" :row="row"></component>
    </el-card>

    <el-dialog
      :visible.sync="openInfo"
      width="1500px"
      append-to-body
      v-if="openInfo"
    >
      <div class="el-dialog-div">
        <component :is="'BiCommentFirstDwd'" :row="row"></component>
      </div>
    </el-dialog>

    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{ query.brandList + " " }}全平台评论数走势分析</span
        >
      </div>
      <barLineI :chartData="echartDataSku" />
    </el-card>
  </div>
</template>

<script>
import {
  selectNegativeCommentsData,
  selectCommentsStatistics,
  selectCommentData,
} from "@/api/comment/BiCommentFirstDwd";
import KoiCardI from "./zindex/KoiCardI.vue";
import wordCloud from "./zindex/wordCloud.vue";
import barLineI from "./zindex/barLineI.vue";
import TotalSales from "./zindex/TotalSales.vue";
import TotalSalesI from "./zindex/TotalSalesI.vue";
import TotalSalesII from "./zindex/TotalSalesII.vue";
import TotalSalesIII from "./zindex/TotalSalesIII.vue";
import date from "./common/date";
import listAll from "./components/listAll";

import BiCommentFirstDwd from "@/views/comment/BiCommentFirstDwd/FilterInput.vue";
export default {
  dicts: [
    "sys_product_age",
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
    "sys_product_pp",
  ],
  components: {
    date,
    listAll,
    KoiCardI,
    wordCloud,
    barLineI,
    BiCommentFirstDwd,
    TotalSales,
    TotalSalesI,
    TotalSalesII,
    TotalSalesIII,
  },
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",
      //时间控件
      timeObj: {},

      // query: {
      //   brandList: [],
      //   // dateType: "近30天",
      //   startDate: "",
      //   endDate: "",
      //   dateType: "",
      //   // channelType: "shop",
      // },
      // 店铺
      cascadeList: [],
      //弹窗
      openInfo: false,
      row: {},
      itemData: {},
      chartsData: [],
      echartDataSku: {},
    };
  },
  created() {
    this.query.brandList = ["VFU"];
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        // if (JSON.stringify(this.query) != "{}") {
        // if (!this.query.endDate) {
        this.getselectCommentsStatistics();
        this.getselectNegativeCommentsData();
        this.init();
        // }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    SetLineChartData(threeLevelCategory) {
      this.row = {
        commentType: "差评",
        threeLevelCategory: threeLevelCategory,
        ...this.query,
        thisPageSize: 10,
        pageNum: 1,
      };
      // this.openInfo = true;
    },
    init() {
      selectCommentData(this.queryParams).then((response) => {
        this.itemData = response;
      });
    },
    getselectNegativeCommentsData() {
      selectNegativeCommentsData(this.queryParams).then((response) => {
        this.chartsData = this.transformFeedbackArray(response);
        let maxCount = 0;
        let maxValue = "";

        response.forEach((item) => {
          if (item.propertyValueCount > maxCount) {
            maxCount = item.propertyValueCount;
            maxValue = item.propertyValue;
          }
        });

        // console.log("具有最大propertyValueCount的propertyValue是:", maxValue);
        this.SetLineChartData();
      });
    },
    getselectCommentsStatistics() {
      this.queryParams = {
        startDate: this.query.startDate,
        endDate: this.query.endDate,
        dateType: this.query.dateType,
        brandList: this.query.brandList,
      };
      selectCommentsStatistics(this.queryParams).then((response) => {
        this.echartDataSku = {
          columns: ["日期", "好评", "差评", "中评", "所有"],
          rows: [],
        };
        response.forEach((item) => {
          this.echartDataSku.rows.push({
            日期: item.dataDateUnit,
            好评: item.positiveComments,
            差评: item.negativeComments,
            中评: item.neutralComments,
            所有: item.totalComments,
          });
        });
      });
    },
    transformFeedbackArray(feedbackArray) {
      // 使用 map 方法遍历原始数组，并返回一个新的数组
      return feedbackArray.map((item) => {
        // 从当前项中提取 propertyValue 和 propertyValueCount
        const name = item.propertyValue;
        const value = item.propertyValueCount; // 将字符串转换为整数

        // 返回一个包含 name 和 value 的新对象
        return { name, value };
      });
    },
    // handleGo(path) {
    //   this.$router.push({
    //     path: path,
    //   });
    // },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      if (!timeObj.endTime) {
        return;
      }
      this.query.startDate = timeObj.startTime;
      this.query.endDate = timeObj.endTime;
      this.query.dateType = timeObj.dateType;

      this.getselectCommentsStatistics();
      this.getselectNegativeCommentsData();
      this.init();
    },
    //
    getbrandList(type) {
      this.query.brandList = type;

      this.getselectCommentsStatistics();
      this.getselectNegativeCommentsData();
      this.init();
      // if (type.length == 1) {
      //   this.query.channelType = "brand";
      // } else if (type.length == 2) {
      //   this.query.channelType = "channel";
      // } else if (type.length == 3) {
      //   this.query.channelType = "shop";
      // }
    },
  },
};
</script>

<style>
</style>